<template>
  <xy-page>
    <div class="playerWarm">
      <el-form>
        <!-- <el-form-item label="暖场开关:" :label-width="labwidth">
          <el-switch v-model="switch" class="ft10"></el-switch>
        </el-form-item>-->
        <el-form-item label="暖场类型:" :label-width="labwidth">
          <el-radio v-model="radio" label="1">图片</el-radio>
          <!-- <el-radio v-model="radio" label="2">视频</el-radio> -->
        </el-form-item>
        <div v-if="radio==1">
          <el-form-item label="暖场图片:" :label-width="labwidth">
            <div class="desc">图片建议尺寸为：1280 x 720，图片大小不超过4M，支持 jpg、jpeg、png、gif 格式</div>
            <xy-upload @uploadImage="warmImg" :imgSize="4" accept="image/jpeg,image/png,image/gif" checkSuffix="jpg,jpeg,png,gif">
              <el-button>上传图片</el-button>
            </xy-upload>
          </el-form-item>
          <el-form-item label="跳转链接:" :label-width="labwidth">
            <el-input v-model="url" class="w300"></el-input>
          </el-form-item>
          <el-form-item label="图片预览:" :label-width="labwidth" class="preview-img">
            <div v-if="imageUrl" :style="'background-image: url('+imageUrl+')'" class="avatar ft10"></div>
            <div v-else style="background-image: url('/static/images/default_warm.png')" class="avatar ft10"></div>
          </el-form-item>
        </div>
        <!-- <div v-if="radio==2">
          <el-form-item label="视频来源:" :label-width="labwidth">
            <xy-upload  :imgSize=4>
              <el-button>上传视频</el-button>
            </xy-upload>
            <span style="color:#ccc" class="mgl20">上传小于 50M 的视频</span>
          </el-form-item>
          <el-form-item label="视频预览:" :label-width="labwidth">
            <img v-if="videoUrl" :src="videoUrl" class="avatar ft10">
            <i v-else class="el-icon-plus avatar-uploader-icon ft10"></i>
          </el-form-item>
        </div> -->

        <el-form-item label :label-width="labwidth">
          <el-button type="primary" @click="warmSet">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </xy-page>
</template>

<script>
export default {
  data() {
    return {
      labwidth: '100px',
      radio: '1',
      url: '',
      imageUrl: '',
      // videoUrl: ''
    }
  },
  methods: {
    warmImg(param){//上传图片
      this.imageUrl = param
    },
    // 获取暖场设置
    getData(){
      this.$postStream('/admin/instance/ccb/polyv/warm/get.do', {
        data: {
          appId: this.appId,
          channelId: this.channelId
        },
        success: res => {
          if(res.success){
            this.imageUrl = res.object.coverImage || ''
            this.url = res.object.coverHref
          }
        }
      })
    },
    warmSet(){ //暖场设置
      if(!this.url && !this.$utils.isUrl(this.url)){
        this.$message.error('请输入正确的跳转链接')
        return
      }
      
      this.$postStream('/admin/instance/ccb/polyv/warm/update.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          coverImage: this.imageUrl,
          coverHref: this.url
        },
        success:res=>{
          if(res.success){
            this.$message.success('保存成功!')
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('保存失败!')
          }
        }
      })
    }
  },
  mounted() {
    this.channelId = sessionStorage.getItem('channelId')
    this.appId = sessionStorage.getItem('appId') || ''
    this.getData()
  }
};
</script>

<style lang="scss" scoped>
.playerWarm {
  position: relative;
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    border: 1px solid;
  }
  .avatar {
    display: inline-block;
    width: 320px;
    height: 180px;
    border: 1px solid #ccc;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .preview-img {
    position: absolute;
    left: 480px;
    top: 62px;
  }

  .desc{
    width: 300px;
    color: #ccc;
  }
}
</style>
